<template>
  <div>
    <!-- 搜索框 -->
    <ul class="input" v-show="service">
      <li>
        名称:
        <el-input
          placeholder=""
          v-model="searchValue.name"
          clearable
          size="small "
        ></el-input>
      </li>
      <li>
        是否套餐:
        <el-select v-model="searchValue.carPackage" clearable
        size="small" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li>
        服务分类:
        <el-select v-model="searchValue.serviceCatalog" 
          size="small"
          class="choose"
          placeholder="请选择">
              <el-option
              v-for="item in option2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </li>
      <li>
        审核状态:
        <el-select
          v-model="searchValue.auditStatus"
          size="small"
          class="choose"
          placeholder="请选择">
              <el-option
              v-for="item in option3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </li>
      <li>
        上架状态:
        <el-select
          v-model="searchValue.saleStatus"
          style="margin-right: 5px;"
          size="small"
          class="choose"
          placeholder="请选择">
              <el-option
              v-for="item in option4"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </li>
      <li class="l_btn">
        <el-button
        type="primary"
        @click="search"
        icon="el-icon-search"
        size="small">搜索
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="small"
          @click="reset"
          style="background-color: #fff; border-color: #ddd; color: #606266"
          >重置
        </el-button>
      </li>
    </ul>
    <!-- 新增栏 -->
    <div class="btn">
      <div class="btn_l">
        <Addservice></Addservice>
        
      </div>
      <div class="btn_r">
        <i @click="changetop" class="el-icon-search"></i>
        <i class="el-icon-refresh"></i>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="服务名称">
        <template slot-scope="{ row }">{{ row.name }}</template>
      </el-table-column>
      <el-table-column label="服务价格">
        <template slot-scope="{ row }">{{ row.originalPrice }}</template>
      </el-table-column>
      <el-table-column label="折扣价">
        <template slot-scope="{ row }">{{ row.discountPrice }}</template>
      </el-table-column>
      <el-table-column label="是否套餐">
        <template slot-scope="{ row }">{{
          row.carPackage == 0 ? "是" : "否"
        }}</template>
      </el-table-column>
      <el-table-column label="服务分类">
        <template slot-scope="{ row }">{{
          row.serviceCatalog == 0
            ? "维修"
            : row.serviceCatalog == 1
            ? "保养"
            : "其他"
        }}</template>
      </el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="{ row }">{{
          row.auditStatus=="0"?"初始化":row.auditStatus=="1"?"审核中":row.auditStatus=="2"?"审核通过":row.auditStatus=="3"?"重新调整":"无需审核"
        }}</template>
      </el-table-column>
      <el-table-column label="上架状态">
        <template slot-scope="{ row }">{{
          row.saleStatus ==0 ? "已上架" : "未上架"
        }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="备注" width="260">
        <template slot-scope="{ row }">{{ row.info }}</template>
      </el-table-column>
      <el-table-column label="操作" width="130" align="center">
        <!-- <template>
          <i class="el-icon-edit"></i>编辑
          <i class="el-icon-close" style="margin-left: 16px"></i>
        </template> -->
        <template slot-scope="{row}">
          <el-button :disabled="row.saleStatus==0" type="text" size="small">
            <i class="el-icon-edit"></i>编辑
          </el-button>
          <el-button
          type="text"
          @click="shangjiaBtn(row.id)"
          size="small">
            <i class="el-icon-thumb"></i>上架
          </el-button>
          <el-button
          type="text"
          @click="xiajiaBtn(row.id)"
          size="small">
            <i class="el-icon-close"></i>下架
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div
      style="display: flex; justify-content: flex-end; padding: 20px 20px 0 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchValue.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { GetServiceItemApi,searchServiceItemApi, shangjia,
xiajia} from "@/request/api";
import Addservice from "@/components/userness/Addservice.vue" 
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      total: null,
      service:true,
      // 是否套餐
      options1:[
        { value: 0,label: '是'},
        { value: 1,label: '否'}
        ],
        // 服务分类
        option2:[
        { value: 0,label: '维修'},
        { value: 1,label: '保养'},
        { value: 2,label: '其他'}
        ],
        // 审核状态
        option3:[
        { value: 0,label: '初始化'},
        { value: 1,label: '审核中'},
        { value: 2,label: '审核通过'},
        { value: 3,label: '审核拒绝'},
        { value: 4,label: '无需审核'}
        ],
        // 上架状态
        option4:[
        { value: 0,label: '已上架'},
        { value: 1,label: '未上架'}
        ],
        searchValue:{
          name:'',  
          // 当前页数
          pageNum: 1, 
          // 每页条数
          pageSize: 10, 
          // 是否套餐
          carPackage:null,
          // 服务分类
          serviceCatalog:null,
          // 审核状态
          auditStatus:null,
          // 上架状态
          saleStatus:null
        },
    };
  },
  methods: {
    // 上架
    shangjiaBtn(id){
      shangjia(id);
      let res =  this.getTableData({
        pageNum: this.searchValue.pageNum,
        pageSize: this.searchValue.pageSize,
      })
      this.tableData = res.rows
    },
    // 下架
    xiajiaBtn(id){
      xiajia(id);
      let res =  this.getTableData({
        pageNum: this.searchValue.pageNum,
        pageSize: this.searchValue.pageSize,
      })
      this.tableData = res.rows
    },
    // 搜索
    async search(){
      let res = await searchServiceItemApi({...this.searchValue})
      if(!res) return
      this.tableData= res.rows
    },
    // 搜索框重置
    reset(){
      this.searchValue.name="",
      this.searchValue.carPackage="",
      this.searchValue.serviceCatalog="",
      this.searchValue.auditStatus="",
      this.searchValue.saleStatus="",
      this.getTableData()
    },
    changetop(){
      this.service=!this.service
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.searchValue.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 当前页数改变的时候执行
      console.log(`当前页: ${val}`);
      this.searchValue.pageNum = val;
      this.getTableData();
    },
    async getTableData() {
      const GetServiceItemApiRes = await GetServiceItemApi({
        pageNum: this.searchValue.pageNum,
        pageSize: this.searchValue.pageSize,
      });
      if (!GetServiceItemApiRes) return;
      this.tableData = GetServiceItemApiRes.rows;
      this.total = GetServiceItemApiRes.total;
    },
    handleSelectionChange(){},
  },
  created(){
    this.getTableData()
  },
  components:{
    Addservice
  }
};
</script>
   
<style lang = "less" scoped>
ul,
li {
  list-style: none;
}
.input {
  width: 100%;
  li {
    width: 320px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 12px;
    .el-input {
      width: 70%;
    }
  }
  .l_btn {
    width: 160px;
  }
  .el-icon-delete {
    color: #1890ff;
  }
  .el-icon-delete {
    color: #1890ff;
  }
}
.btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .btn_r {
    .el-icon-search {
      width: 30px;
      height: 30px;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      // background-color: #1890ff;
      text-align: center;
      line-height: 30px;
      &:hover {
        border: 1px solid #1890ff;
        background-color: #e8f4ff;
        cursor: pointer;
      }
    }
    .el-icon-refresh {
      width: 30px;
      height: 30px;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      // background-color: #1890ff;
      text-align: center;
      line-height: 30px;
      margin-left: 10px;
      &:hover {
        border: 1px solid #1890ff;
        background-color: #e8f4ff;
        cursor: pointer;
      }
    }
  }
}
</style>